/**
 * 1. 往父元素中拼子元素
 */
$(function ()
{
    $("#test_append").click(function()
    {
        // $("div").append("<b>Hello</b>");
        // $("div").append($("#b1"));
        var b1 = document.getElementById("b1");
        $("div").append(b1);

    });

    $("#test_appendTo").click(function()
    {
        $("#b1").appendTo($("div"));
    });

    $("#test_prepend").click(function()
    {
        $("div").prepend($("#b1"));
    });

    $("#test_prependTo").click(function()
    {
        $("#b1").prependTo($("div"));
    });
})

/**
 * 2. 调整兄弟dom之间的顺序
 */
$(function ()
{
    $("#test_after").click(function ()
    {
        $("#div1").after($("#b1"));
    });

    $("#test_before").click(function ()
    {
        $("#ul").before($("#b1"));
    });

    $("#test_insertAfter").click(function ()
    {
        $("#b1").insertAfter($("#div2"));
    });

    $("#test_insertBefore").click(function ()
    {
        $("#ul").insertBefore($("#b1"));
    });
})

/**
 * 3. 删除节点和删除子节点
 */
$(function ()
{
   $("#test_removeNode").click(function ()
   {
       $("#div2").remove();
   });

   $("#test_emptyNode").click(function ()
   {
       $("#ul").empty();
   })
})

/**
 * 4. 复制,替换节点
 */
$(function ()
{
    $("#test_clone").click(function ()
    {
        $("#b1").clone().insertAfter($("#div2"));
    });

    $("#btn1").click(function ()
    {
        $(this).clone(true).insertAfter(this);
    });

    $("#test_replace1").click(function ()
    {
        $("#ul").replaceWith($("#div2"));
    });

    $("#test_replace2").click(function ()
    {
        $("<b>干掉所有的表单按钮</b>").replaceAll($(":button"));
    });

})

/**
 * 5. 获取属性值,设置属性值
 */
$(function ()
{
    $("#test_getterAttr").click(function ()
    {
        $("div").attr("style",function (index,attrVal)
        {
            console.log(attrVal);
            return attrVal + "_ooxx";
        })
    })

    $("#test_setterAttr").click(function ()
    {
        $(this).attr("value","就是要改了你的文字");
        $(this).attr({"style":"background-color:orange","type":"text"});
    })
})

/**
 * 6. css操作
 */
$(function ()
{
    $("#test_addClass").click(function ()
    {
       $(":button").addClass("myButton");
    });

    $("#test_removeClass").click(function ()
    {
        $("#test_hasClass").removeClass();
    });

    $("#test_togggleClass").click(function ()
    {
       $(":button").toggleClass("myButton");
    });

    $("#test_hasClass").click(function ()
    {
        console.log($(this).hasClass("myButton"));
    });
})



